import App from "./App.vue";
import router from "./router";
import { setupStore } from "@/store";
import ElementPlus from "element-plus";
import { getServerConfig } from "./config";
import { createApp, Directive } from "vue";
import { MotionPlugin } from "@vueuse/motion";
// import { useEcharts } from "@/plugins/echarts";
import { injectResponsiveStorage } from "@/utils/responsive";
import VxeUIAll from 'vxe-pc-ui'
import 'vxe-pc-ui/lib/style.css'
import VxeUITable from 'vxe-table'
import 'vxe-table/lib/style.css'
import { useI18n } from "@/plugins/i18n";
import zhCN from 'vxe-pc-ui/lib/language/zh-CN' // 简体中文
// import zhCHT from 'vxe-pc-ui/lib/language/zh-CHT' // 繁体中文
// import zhHK from 'vxe-table/lib/locale/lang/zh-HK' // 中文(香港)
// import zhTW from 'vxe-table/lib/locale/lang/zh-TW' // 中文(台湾)
// import zhMO from 'vxe-table/lib/locale/lang/zh-MO' // 中文(澳门)
// import arEG from 'vxe-table/lib/locale/lang/ar-EG' // 阿拉伯语(埃及)
// import deDE from 'vxe-table/lib/locale/lang/de-DE' // 德语(德国)
import enUS from 'vxe-table/lib/locale/lang/en-US' // 英语(美国)

import Table from "@pureadmin/table";
// import PureDescriptions from "@pureadmin/descriptions";

import {
    VxeUI,
    VxeButton,
    VxeButtonGroup,
    VxeDrawer,
    VxeForm,
    VxeFormGroup,
    VxeFormItem,
    VxeIcon,
    VxeLoading,
    VxeModal,
    VxePager,
    VxePrint,
    VxeTooltip,
    VxeUpload,
} from 'vxe-pc-ui'

import {
    VxeTable,
    VxeColumn,
    VxeColgroup,
    VxeGrid,
    VxeToolbar,
    // VxeEdit
} from 'vxe-table'

// 导入主题变量，也可以重写主题变量
import 'vxe-table/styles/cssvar.scss'
import 'vxe-pc-ui/styles/cssvar.scss'

// 注册语言
VxeUI.setI18n('zh-CN', zhCN)
// VxeUI.setI18n('zh-CHT', zhCHT)
// VxeUI.setI18n('zh-HK', zhHK)
// VxeUI.setI18n('zh-TW', zhTW)
// VxeUI.setI18n('zh-MO', zhMO)
// VxeUI.setI18n('ar-EG', arEG)
// VxeUI.setI18n('de-DE', deDE)
VxeUI.setI18n('en-US', enUS)
VxeUI.setLanguage('zh-CN')
// VxeUI.setLanguage('en-US')

// 可选组件
function lazyVxeUI(app) {
    app.use(VxeButton)
    app.use(VxeButtonGroup)
    app.use(VxeDrawer)
    app.use(VxeForm)
    app.use(VxeFormGroup)
    app.use(VxeFormItem)
    app.use(VxeIcon)
    app.use(VxeLoading)
    app.use(VxeModal)
    app.use(VxePager)
    app.use(VxePrint)
    app.use(VxeTooltip)
    app.use(VxeUpload)
}

function lazyVxeTable(app) {
    app.use(VxeTable)
    app.use(VxeColumn)
    app.use(VxeColgroup)
    app.use(VxeGrid)
    app.use(VxeToolbar)
    // app.use(Edit)
}


// 引入重置样式
import "./style/reset.scss";
// 导入公共样式
import "./style/index.scss";
// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
import "./style/tailwind.css";
import "element-plus/dist/index.css";
// 导入字体图标
import "./assets/iconfont/iconfont.js";
import "./assets/iconfont/iconfont.css";

const app = createApp(App);

// 自定义指令
import * as directives from "@/directives";
// 获取 directives 对象的所有键，并遍历这些键
Object.keys(directives).forEach(key => {
    // 使用 key 作为参数，从 directives 对象中获取对应的指令
    // directives 被强制类型转换为 { [key: string]: Directive } 类型，以确保类型安全
    // 这里的 as 操作符用于类型断言，表示我们确信 directives 对象具有这种类型结构
    app.directive(key, (directives as { [key: string]: Directive })[key]);
});
app.directive('vTablescroll', {
    mounted(el: Element, binding) {
        const selectwrap: any = el.querySelector('.el-scrollbar__wrap')
        // const selectwrap: any = el.querySelector('.el-scrollbar_wrap')
        if (selectwrap == null) return
        selectwrap.scrollFn = function () {
            const sign = 0
            const scrollDistance =
                this.scrollHeight - this.scrollTop - this.clientHeight
            if (scrollDistance <= sign) {
                binding.value()
            }
        }
        selectwrap.addEventListener('scroll', selectwrap.scrollFn)

    },
    unmounted(el: Element) {
        const selectwrap: any = el.querySelector('.el-scrollbar_wrap')
        if (selectwrap == null) return
        selectwrap.removeEventListener('scroll', selectwrap.scrollFn)
        selectwrap.scrollFn = null
    }
})

// 全局注册`@iconify/vue`图标库
import {
    IconifyIconOffline,
    IconifyIconOnline,
    FontIcon
} from "./components/ReIcon";
app.component("IconifyIconOffline", IconifyIconOffline);
app.component("IconifyIconOnline", IconifyIconOnline);
app.component("FontIcon", FontIcon);

// 全局注册按钮级别权限组件
import { Auth } from "@/components/ReAuth";
app.component("Auth", Auth);


getServerConfig(app).then(async config => {
    app.use(router);
    await router.isReady();
    injectResponsiveStorage(app, config);
    setupStore(app);
    lazyVxeUI(app);
    // lazyVxeTable(app);
    app.use(MotionPlugin).use(ElementPlus)
        .use(VxeUIAll)
        .use(VxeUITable)
        .use(useI18n)
        .use(Table);
    // .use(PureDescriptions);
    app.mount("#app");
});
